<template>
  <el-main>
    <el-tabs
      tab-position="left"
      v-model="activeTab"
    >
      <el-tab-pane
        label="主页"
        name="home"
      >
        <el-row>
          <el-col :span="10">
            <el-card>
              <div slot="header">
                <span>xxx后援会 - 公告</span>
                <el-button
                  class="operation"
                  type="text"
                  @click="aid"
                >应援</el-button>
                <el-button
                  class="operation"
                  type="text"
                  @click="showChangeNotice"
                >修改公告</el-button>
              </div>
              <div>
                <p>已获得应援总额: 1024 元</p>
                <p>{{notice}}</p>
              </div>
            </el-card>
          </el-col>
          <el-col
            :span="13"
            :offset="1"
          >
            <el-card>
              <div slot="header">
                <span>记录</span>
              </div>
              <el-table :data="records">
                <el-table-column
                  label="编号"
                  prop="id"
                  width="60"
                ></el-table-column>
                <el-table-column
                  label="记录"
                  prop="desc"
                ></el-table-column>
              </el-table>
            </el-card>
          </el-col>
        </el-row>
      </el-tab-pane>
      <el-tab-pane
        label="提案列表"
        name="proposal"
      >
        <el-table
          :data="proposals"
          border
        >
          <el-table-column
            label="编号"
            prop="id"
            width="100"
          ></el-table-column>
          <el-table-column
            label="名称"
            prop="title"
          ></el-table-column>
          <el-table-column
            label="用途"
            prop="purpose"
          ></el-table-column>
          <el-table-column
            label="备注"
            prop="desc"
          ></el-table-column>
          <el-table-column
            label="操作"
            prop="operation"
            width="100"
          >
            <template slot-scope="scope">
              <div>
                <el-button
                  size="mini"
                  type="warning"
                  plain
                  round
                  @click="showVote"
                >助力</el-button>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
      <el-tab-pane
        label="发起提案"
        name="newProposal"
      >
        <el-row>
          <el-col
            :span="10"
            :offset="7"
          >
            <el-card>
              <div slot="header">
                <span>发起提案</span>
              </div>
              <el-form
                label-width="80px"
                ref="proposalForm"
                :rules="proposalFormRules"
                :model="proposalFormData"
              >
                <el-form-item
                  label="提案金额"
                  prop="money"
                >
                  <el-input
                    v-model="proposalFormData.money"
                    type="number"
                    clearable
                  ></el-input>
                </el-form-item>
                <el-form-item
                  label="目标账户"
                  prop="target"
                >
                  <el-input
                    v-model="proposalFormData.target"
                    type="number"
                    clearable
                  ></el-input>
                </el-form-item>
                <el-form-item
                  label="用途"
                  prop="purpose"
                >
                  <el-input
                    v-model="proposalFormData.purpose"
                    clearable
                  ></el-input>
                </el-form-item>
                <el-form-item
                  label="备注"
                  prop="desc"
                >
                  <el-input
                    v-model="proposalFormData.desc"
                    clearable
                  ></el-input>
                </el-form-item>
                <el-form-item>
                  <el-button
                    type="primary"
                    :style="{ width: '100%' }"
                    @click="submitProposal"
                  >发起提案</el-button>
                </el-form-item>
              </el-form>
            </el-card>
          </el-col>
        </el-row>
      </el-tab-pane>
      <el-tab-pane
        label="应援"
        name="aid"
      >
        <el-row>
          <el-col
            :span="10"
            :offset="7"
          >
            <el-card>
              <div slot="header">
                <span>应援</span>
              </div>
              <el-form
                label-width="80px"
                ref="aidForm"
                :rules="aidFormRules"
                :model="aidFormData"
              >
                <el-form-item
                  label="应援金额"
                  prop="money"
                >
                  <el-input
                    v-model="aidFormData.money"
                    type="number"
                    clearable
                  ></el-input>
                </el-form-item>
                <el-form-item
                  label="备注"
                  prop="desc"
                >
                  <el-input
                    v-model="aidFormData.desc"
                    clearable
                  ></el-input>
                </el-form-item>
                <el-form-item>
                  <el-button
                    type="primary"
                    :style="{ width: '100%' }"
                    @click="submitAid"
                  >应援</el-button>
                </el-form-item>
              </el-form>
            </el-card>
          </el-col>
        </el-row>
      </el-tab-pane>
    </el-tabs>
    <el-dialog
      title="修改公告"
      :visible.sync="showChangeNoticeDialog"
      width="40%"
    >
      <el-form
        label-position="top"
        ref="noticeForm"
      >
        <el-form-item label="公告">
          <el-input
            type="textarea"
            rows="5"
            v-model="noticeFormData.notice"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            @click="submitChangeNotice"
          >确认修改</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <el-dialog
      title="助力提案"
      :visible.sync="showVoteDialog"
      width="400px"
    >
      <el-form
        label-width="80px"
        ref="voteForm"
        :rules="voteFormRules"
        :model="voteFormData"
      >
        <el-form-item label="投">
          <el-input
            v-model="voteFormData.number"
            type="number"
            style="width: 200px;"
          >
            <div slot="append">票</div>
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            @click="submitVote"
          >确认助力</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </el-main>
</template>

<script>
export default {
  name: 'SSA',
  data() {
    return {
      activeTab: 'home',
      records: new Array(8).fill(1).map((it, index) => ({ id: index, desc: `记录${index}` })),
      proposals: new Array(8).fill(1).map((it, index) => ({
        id: index,
        title: `提案${index}`,
        purpose: `用途${index}`,
        desc: `备注${index}`,
      })),
      proposalFormData: {},
      proposalFormRules: {
        money: [{ required: true, message: '请输入提案金额!', trigger: 'blur' }],
        target: [{ required: true, message: '请输入目标账户!', trigger: 'blur' }],
        purpose: [{ required: true, message: '请输入用途!', trigger: 'blur' }],
        desc: [{ required: true, message: '请输入备注!', trigger: 'blur' }],
      },
      aidFormData: {},
      aidFormRules: {
        money: [{ required: true, message: '请输入应援金额!', trigger: 'blur' }],
        desc: [{ required: true, message: '请输入备注!', trigger: 'blur' }],
      },
      showChangeNoticeDialog: false,
      notice: 'xxxxxxxxxxxxx',
      noticeFormData: {},
      showVoteDialog: false,
      voteFormData: {
        number: 1,
      },
      voteFormRules: {
        number: [{ required: true, message: '请输入投票数!', trigger: 'blur' }],
      },
    };
  },
  methods: {
    aid() {
      this.activeTab = 'aid';
    },
    showVote() {
      this.showVoteDialog = true;
    },
    submitVote() {
      this.showVoteDialog = false;
    },
    submitProposal() {
      this.$refs.proposalForm.validate((valid) => {
        if (valid) {
          this.$router.push('/payment');
        }
      });
    },
    submitAid() {
      this.$refs.aidForm.validate((valid) => {
        if (valid) {
          this.$router.push('/payment');
        }
      });
    },
    showChangeNotice() {
      this.showChangeNoticeDialog = true;
      this.noticeFormData.notice = this.notice;
    },
    submitChangeNotice() {
      this.showChangeNoticeDialog = false;
      this.notice = this.noticeFormData.notice;
    },
  },
};
</script>

<style scoped>
.operation {
  float: right;
  padding: 3px 0;
  margin-left: 20px;
}
</style>
